// Copyright 2020 The casbin Authors. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

import React from "react";
import * as Setting from "../Setting";
import i18next from "i18next";
import {withRouter} from "react-router-dom";
import * as NodeBackend from "../backend/NodeBackend";
import * as TopicBackend from "../backend/TopicBackend";
import $ from "jquery";
import Select2 from "react-select2-wrapper";

const pangu = require("pangu");

class MoveTopicNodeBox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      classes: props,
      topicId: props.match.params.id,
      topic: [],
      nodes: [],
      form: {},
    };
  }

  componentDidMount() {
    this.getNodes();
    this.getTopic();
  }

  initForm() {
    let form = this.state.form;
    form["id"] = this.state.topic?.id;
    form["nodeId"] = this.state.topic?.nodeId;
    form["nodeName"] = this.state.topic?.nodeName;
    this.setState({
      form: form,
    });
  }

  moveTopicNode() {
    TopicBackend.updateTopicNode(this.state.form)
      .then((res) => {
        if (res.status === 'ok') {
          Setting.goToLink(`/t/${this.state.topicId}`);
        } else {
          Setting.showMessage("error", res?.msg);
        }
      });
  }

  getNodes() {
    NodeBackend.getNodes()
      .then((res) => {
        this.setState({
          nodes: res,
        });
      });
  }

  getTopic() {
    TopicBackend.getTopic(this.state.topicId)
      .then((res) => {
        this.setState({
          topic: res,
        }, () => {
          this.initForm();
        });
      });
  }

  updateFormField(key, value) {
    let form = this.state.form;
    form[key] = value;
    this.setState({
      form: form,
    });
  }

  getIndexFromNodeId(nodeId) {
    for (let i = 0; i < this.state.nodes.length; i ++) {
      if (this.state.nodes[i].id === nodeId) {
        return i;
      }
    }

    return -1;
  }

  render() {
    if (this.state.topic !== null && this.state.topic.length === 0) {
      return (
        <div class="box">
          <div class="header"><a href="/">{Setting.getForumName()}</a> <span class="chevron">&nbsp;›&nbsp;</span>{" "}{i18next.t("loading:Content loading")}</div>
          <div class="cell"><span class="gray bigger">{i18next.t("loading:Please wait patiently...")}</span></div>
        </div>
      )
    }

    if (this.state.topic === null || !this.state.topic?.editable) {
      return (
        <div className="box">
          <div className="header"><a href="/">{Setting.getForumName()}</a> <span
            className="chevron">&nbsp;›&nbsp;</span>{" "}{i18next.t("move:Move topic")}
          </div>
          <div className="inner">
            {i18next.t("move:You cannot move this topic.")}
          </div>
        </div>
      )
    }

    return (
      <div className="box">
        <div className="header"><a href="/">{Setting.getForumName()}</a>
          {" "}<span className="chevron">&nbsp;›&nbsp;</span>
          <a href={`/go/${this.state.topic?.nodeId}`}>{this.state.topic?.nodeName}</a> <span className="chevron">&nbsp;›&nbsp;</span>
          {" "}<a href={`/t/${this.state.topic?.id}`}>{pangu.spacing(this.state.topic?.title)}</a>
          {" "}<span className="chevron">&nbsp;›&nbsp;</span>
          {" "}{i18next.t("move:Move topic")}
        </div>
        <div className="inner">
            <table cellPadding="5" cellSpacing="0" border="0" width="100%">
              <tbody>
              <tr>
                <td width="120" align="right">{i18next.t("move:Topic")} ID</td>
                <td width="auto" align="left">{this.state.topic?.id}</td>
              </tr>
              <tr>
                <td width="120" align="right">{i18next.t("move:Title")}</td>
                <td width="auto" align="left">
                  <a href={`/t/${this.state.topic?.id}`} target="_blank">{pangu.spacing(this.state.topic?.title)}</a>
                </td>
              </tr>
              <tr>
                <td width="120" align="right">{i18next.t("move:Current node")}</td>
                <td width="auto" align="left"><a href={`/go/${this.state.topic?.nodeId}`} target="_blank">{this.state.topic?.nodeName}</a></td>
              </tr>
              <tr>
                <td width="120" align="right">{i18next.t("move:Target node")}</td>
                <td width="auto" align="left">
                  <Select2
                    value={this.getIndexFromNodeId(this.state.form.nodeId)}
                    style={{width: "300px", fontSize: "14px"}}
                    data={
                      this.state.nodes.map((node, i) => {
                        return {text: `${node.name} / ${node.id}`, id: i};
                      })
                    }
                    onSelect={event => {
                      const s = $(event.target).val();
                      if (s === null) {
                        return;
                      }

                      const index = parseInt(s);
                      const nodeId = this.state.nodes[index].id;
                      const nodeName = this.state.nodes[index].name;
                      this.updateFormField("nodeId", nodeId);
                      this.updateFormField("nodeName", nodeName);
                    }}
                    options={
                      {
                        placeholder: i18next.t("new:Please select a node"),
                      }
                    }
                  />
                </td>
              </tr>
              <tr>
                <td width="120" align="right"></td>
                <td width="auto" align="left">
                  <input type="submit" className="super normal button" value={i18next.t("move:Move")} onClick={() => this.moveTopicNode()}/></td>
              </tr>
              </tbody>
            </table>
        </div>
      </div>
    )
  }
}

export default withRouter(MoveTopicNodeBox);
